<template>
  <div class="admin-layout">
    <AdminLayoutHeader class="admin-header" />
    <div class="admin-wrapper">
      <AdminLayoutSideBar class="admin-sidebar" />
      <div class="admin-main">
        <AdminLayoutMultiTab class="admin-tabs" />
        <Nuxt class="admin-content" />
      </div>
    </div>
  </div>
</template>

<script>
import AdminLayoutHeader from './admin/AdminLayoutHeader'
import AdminLayoutSideBar from './admin/AdminLayoutSideBar'
import AdminLayoutMultiTab from './admin/AdminLayoutMultiTab'
export default {
  components: { AdminLayoutMultiTab, AdminLayoutSideBar, AdminLayoutHeader },
  layout: 'admin',
}
</script>

<style>
.admin-layout {
  height: 100vh;
  display: grid;
  grid-template-rows: 60px auto;
}
.admin-header {
  padding: 0 2rem;
}
.admin-wrapper {
  display: grid;
  grid-template-columns: 240px auto;
}
.admin-main {
  display: grid;
  grid-template-rows: 36px auto;
}
.admin-content {
  padding: 20px;
}
.admin-header {
  padding: 0 2rem;
  background-color: #192c3e;
}
.admin-sidebar {
  background-color: #ff4500;
}
.admin-content {
  background-color: #b7eb8f;
  padding: 20px;
}
</style>
